<template>
  <div class="process-inspection-todo-page">
    <div class="page-header">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <a-select
            v-model="unitWorks"
            placeholder="请选择单位工程"
            :loading="unitWorksLoading"
            @change="search()"
          >
            <a-select-option
              :value="item"
              v-for="(item, index) in unitWorksSource"
              :key="index"
            >
              {{ item }}
            </a-select-option>
          </a-select>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="search()"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="page-container" v-loading="loading">
      <div class="table-header" header="待办事项"></div>
      <div class="table-list">
        <vxe-table
          height="99%"
          class="scrollbarStyle"
          align="center"
          :data="tableData"
          :column-config="{ resizable: true }"
          show-overflow
          show-header-overflow
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="sysUsername" title="报验人"> </vxe-column>
          <vxe-column field="createTime" title="报验时间"> </vxe-column>
          <vxe-column field="byCount" title="报验个数（个）"> </vxe-column>
          <vxe-column field="updateTime" title="提交时间"> </vxe-column>
          <vxe-column title="当前步骤">
            <template #default="{ row }">
              <div :class="[checkStatusClass(row.wfnodename), 'state']">
                {{ row.wfnodename }}
              </div>
            </template>
          </vxe-column>
          <vxe-column field="operate" width="200" title="操作" fixed="right">
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button type="link" v-if="row.approve" @click="approve(row)">
                  处理
                </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div>
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
  </div>
</template>

<script>
import SelectBlock from "@/components/wisdom-beam/SelectBlock";
import { getLoginData } from "@/tools";
import { getBlockList } from "@/api/common";
import { getUnitWorksSelect } from "@/api/wisdom-beam/quality-app";
import { geGXBYList } from "@/api/todo";
export default {
  props: ["isMenuCode"],
  inject: ["upLeave"],
  components: {
    SelectBlock,
  },
  watch: {
    isMenuCode: {
      handler(val) {
        if (val == "GXBY") {
          this.upLeave.getTodoData();
          this.getSecData();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      conditions: {
        //标段
        orgCode: undefined,
      },
      //单位工程
      unitWorks: undefined,
      unitWorksSource: [],
      unitWorksLoading: false,
      //分页
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      loading: false,
    };
  },
  methods: {
    //获取所有标段
    getSecData() {
      let { userId, tenantCode } = getLoginData();
      getBlockList({ tenantCode, userId })
        .then((res) => {
          let list = res?.data?.result || [];
          this.conditions.orgCode = list?.[0]?.orgCode || "";
          this.getUnitWorksList();
        })
        .catch((_) => {
          this.conditions.orgCode = "";
        });
    },

    //审批
    approve(row) {
      let { orgCode, field1, childIds } = row;
      localStorage.setItem("processesApproveIds", (childIds || []).toString());
      this.$router.push({
        path: "/nebula/wisdom-beam-app/approvalRecord/approve",
        query: {
          orgCode,
          unitWorks: field1,
          id: row.id,
          backPath: "/todo",
        },
      });
    },

    //查询单位工程【下拉框】
    getUnitWorksList() {
      this.unitWorksLoading = true;
      let { orgCode } = this.conditions;
      return new Promise((resolve, reject) => {
        getUnitWorksSelect({ orgCode })
          .then((res) => {
            let { data } = res;
            this.unitWorksSource = data?.result || [];
            if (this.unitWorksSource.length == 0) {
              this.unitWorks = undefined;
              return;
            } else {
              let { unitWorks } = this.$route.query;
              if (unitWorks) {
                this.unitWorks = unitWorks;
              } else {
                this.unitWorks = this.unitWorksSource[0];
              }
            }
            resolve();
          })
          .catch((_) => {
            this.unitWorksSource = [];
            this.unitWorks = undefined;
            reject();
          })
          .finally((_) => {
            this.getTableData();
            this.unitWorksLoading = false;
          });
      });
    },

    //搜索
    search() {
      this.pager.page = 1;
      this.getTableData();
    },

    //查询-表格
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { unitWorks } = this;
      let { orgCode } = this.conditions;
      geGXBYList({
        page,
        pageSize,
        orgCode,
        unitWorks: unitWorks ? unitWorks : "",
      })
        .then((res) => {
          this.tableData = res?.data?.result?.rows || [];
          this.pager.total = res?.data?.result?.total || 0;
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    //检验状态类名
    checkStatusClass(status) {
      switch (status) {
        case "待提交":
          return "default";

        case "已完成":
          return "normal";

        default:
          return "warning";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.process-inspection-todo-page {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .page-header {
    .conditions-screening-container {
      box-shadow: none;
    }
    margin-bottom: 10px;
  }
  .page-container {
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .table-header {
      padding: 20px 20px;
      box-sizing: border-box;
      .flex();
      justify-content: space-between;
      align-items: center;
      &::before {
        content: attr(header);
        height: 18px;
        border-left: 3px solid var(--primary-color);
        padding-left: 10px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #525a5d;
        line-height: 18px;
      }
    }
    .table-list {
      flex: 1;
      height: 100%;
      .state {
        &.normal {
          color: #42c596;
        }
        &.warning {
          color: #ff993f;
        }
        &.default {
          color: #0098ff;
        }
      }
    }
  }
}
</style>
